<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mesh-properties</title>
    <script src="js/three.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/dat.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>
<div id="stats-output"></div>
</body>
<script>
    function init() {
        var stats = initStats()

        var scene = new THREE.Scene()

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xeeeeee, 1.0))
        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.shadowMapEnabled = true

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1)
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff})
        var plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.receiveShadow = true;

        plane.rotation.x = -0.5 * Math.PI
        plane.position.set(0, 0, 0)

        scene.add(plane)

        camera.position.set(-30, 40, 30)
        camera.lookAt(scene.position)

        var ambientLight = new THREE.AmbientLight(0x0c0c0c)
        scene.add(ambientLight)

        var spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(-40, 60, 20)
        spotLight.castShadow = true
        scene.add(spotLight)

        document.getElementById('WebGL-output').appendChild(renderer.domElement)

        var step = 0;

        var controls = new function () {
            this.scaleX = 1;
            this.scaleY = 1;
            this.scaleZ = 1;

            this.positionX = 0;
            this.positionY = 0;
            this.positionZ = 0;

            this.rotationX = 0;
            this.rotationY = 0;
            this.rotationZ = 0;
            this.scale = 1;

            this.translateX = 0;
            this.translateY = 0;
            this.translateZ = 0;

            this.visible = true

            this.translate = function () {
                cube.translateX(controls.translateX)
                cube.translateY(controls.translateY)
                cube.translateZ(controls.translateZ)

                controls.positionX = cube.position.x;
                controls.positionY = cube.position.y;
                controls.positionZ = cube.position.z;
            }
        }

        var material = new THREE.MeshLambertMaterial({color: 0x44ff44})
        var geom = new THREE.BoxGeometry(5, 8, 3)
        var cube = new THREE.Mesh(geom, material)
        cube.position.y = 4;
        cube.castShadow = true;
        scene.add(cube)

        var gui = new dat.GUI()

        var guiSacle = gui.addFolder('position')
        var contX = guiSacle.add(controls, 'positionX', -10, 10)
        var contY = guiSacle.add(controls, 'positionY', -4, 20)
        var contZ = guiSacle.add(controls, 'positionZ', -10, 10)

        contX.listen();
        contX.onChange(function (value) {
            cube.position.x = controls.positionX
        })

        contY.listen();
        contY.onChange(function (value) {
            cube.position.y = controls.positionY
        })

        contZ.listen();
        contZ.onChange(function (value) {
            cube.position.z = controls.positionZ
        })

        var guiRotation = gui.addFolder('rotation')
        guiRotation.add(controls, 'rotationX', -4, 4)
        guiRotation.add(controls, 'rotationY', -4, 4)
        guiRotation.add(controls, 'rotationZ', -4, 4)

        var guiTranslate = gui.addFolder('translate')
        guiTranslate.add(controls, 'translateX', -10, 10)
        guiTranslate.add(controls, 'translateY', -10, 10)
        guiTranslate.add(controls, 'translateZ', -10, 10)
        guiTranslate.add(controls, 'translate')

        gui.add(controls, 'visible')

        render()

        function render() {
            stats.update()

            cube.visible = controls.visible

            cube.rotation.x = controls.rotationX;
            cube.rotation.y = controls.rotationY;
            cube.rotation.z = controls.rotationZ;

            cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ)

            requestAnimationFrame(render)
            renderer.render(scene, camera)
        }

        function initStats() {
            var stats = new Stats()

            stats.setMode(0)
            stats.domElement.style.position = 'absolute'
            stats.domElement.style.left = '0px'
            stats.domElement.style.top = '0px'
            document.getElementById('stats-output').appendChild(stats.domElement)
            return stats
        }
    }
    init()
</script>
</html>